Welcome to django!

7.04 首页使用静态文件

1、增加一个static= > bootstrap3文件夹，然后下载存放在static文件夹里面

bootstrap.min.css

bootstrap.min.js

2、 引用模板文件

{% load static %}

< link rel="shortcut icon" href="{% static 'bootstrap3/favicon.ico' %}" >

< link rel="stylesheet" href="{% static 'bootstrap3/bootstrap.min.css' %}" >

< script src="{% static 'bootstrap3/bootstrap.min.js' %}" > < /script >

favicon.ico为网页标题的logo

3、在settings里面增加

STATICFILES_DIRS=[ #在这STATICFILES_DIRS是固定变量名，不能出错

os.path.join(BASE_DIR,"static") #在这路径列表下寻找需要的静态文件

]

4、完整的html

< !DOCTYPE html >

< html lang="en" >

< head >

< meta charset="UTF-8" >

< title > Title < /title >

#< !-- < link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/ bootstrap.min.css" > -- > 动态加载

#< !-- < script src="https: //cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" > < /script > -- > 动态加载

{% load static %}

< link rel="shortcut icon" href="{% static 'bootstrap3/favicon.ico' %}" >

< link rel="stylesheet" href="{% static 'bootstrap3/bootstrap.min.css' %}" >

< script src="{% static 'bootstrap3/bootstrap.min.js' %}" > < /script >

< script src="{% static 'jquery.min.js' %}" > < /script >

< style >

body{

background-image:url("{% static '/bg.jpeg' %}")

}

< /style >

< /head >

< body >

< div class="container" style="margin-top:20px" >

< !-- 主体顶头距为20px-- >

< div class="row" >

< div class="col-8 col-offset-2" >

< div class="panel panel-primary" >

< !-- 项目菜单默认为panel-default颜色,可以参考情境效果，改成蓝色：panel-primary-- >

< div class="panel-heading" >

< h2 class="panel-title" > Book Manage System < /h2 >

< !--修改项目菜单名称为：Book Manage System-- >

< /div >

< div class="panel-body" >

< div class="jumbotron" >

< !--加入项目主体颜色jumbotron-- >

< h1 > 欢迎来到盛凌报价系统 < /h1 >

< p > 只有你想不到的，没有做不到的 < /p >

< a class="btn btn-primary btn-lg" role="button" > 开始吧 < /a >

< !-- btn-primary为按钮颜色，btn-lg为加大-- >

< /div >

< /div >

< /div >

< /div >

< /div >

< /div >

< /body >

< /html >